<template>
    <div>
      <div style="padding: 50px">
        <el-form label-width="100px">
          <el-form-item label="优惠卷名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="使用范围">
            <el-radio v-model="form.dis_type" label="1">课程</el-radio>
            <el-radio v-model="form.dis_type" label="2">图书</el-radio>
          </el-form-item>
          <el-form-item>
            <el-radio v-model="form.scope_type" label="1">全部{{form.dis_type==1?'课程':'图书'}}</el-radio>
            <el-radio v-model="form.scope_type" label="2">指定分类</el-radio>
            <el-radio v-model="form.scope_type" label="3">指定{{form.dis_type==1?'课程':'图书'}}</el-radio>
          </el-form-item>
          <el-form-item>
            <Book @ok="getOk" v-if="form.dis_type == 2 && form.scope_type == 3"></Book>
            <BookCate v-if="form.dis_type == 2 && form.scope_type == 2"></BookCate>
            <Course v-if="form.dis_type == 1 && form.scope_type == 3"></Course>
            <el-tag
              v-for="v in form.commodity_id"
              :key="v.id"
              closable>
              {{v.name}}
            </el-tag>
            <CourseCate @ok="courseCateOk" v-if="form.dis_type == 1 && form.scope_type == 2"></CourseCate>
          </el-form-item>
          <el-form-item label="类型">
            <el-radio v-model="form.receive_type" label="1">领取</el-radio>
            <el-radio v-model="form.receive_type" label="2">赠送</el-radio>
          </el-form-item>
          <el-form-item label="优惠规则">
            满 <el-input v-model="form.full_reduction"></el-input>
            减 <el-input v-model="form.discounted_price"></el-input>
          </el-form-item>
          <el-form-item label="有效日期">
            <el-radio v-model="form.valid_type" label="1">固定天数</el-radio>
            <el-radio v-model="form.valid_type" label="2">固定时间段</el-radio>
          </el-form-item>
          <el-form-item v-if="form.valid_type != ''">
            <el-input v-if="form.valid_type == 1" v-model="form.valid_day"></el-input>
            <el-date-picker
              v-if="form.valid_type == 2"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              v-model="rawDate"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="发放数量">
            <el-input-number controls-position="right" :min="1" :max="100000" v-model="form.num"></el-input-number>
            请输入发放数量，1-100000之间的整数
          </el-form-item>
          <el-form-item label="每人限领">
            <el-input-number controls-position="right" :min="1" v-model="form.restrict_num"></el-input-number>张
          </el-form-item>
        </el-form>
        <el-button @click="submit(0)">保存并返回</el-button>
        <el-button @click="submit(1)">保存并发放</el-button>
      </div>
    </div>
</template>
<script>
import axios from 'axios'
import Book from './coupon-edit/Book'
import BookCate from './coupon-edit/BookCate'
import Course from './coupon-edit/Course'
import CourseCate from './coupon-edit/CourseCate'
export default {
  components: {
    Book,
    BookCate,
    Course,
    CourseCate
  },
    data() {
      return{
        rawDate: [],   // 选择的日期
        form: {
          commodity_id: [],
          dis_type: '1'   ,  // 1. 班课  2：图片
          grant: '0'     ,  // 0：保存并返回 1：保存并发放
          receive_type: '1',  // 1:领取 2：赠送
          restrict_num: 1,  // 每人限领
          scope_type: '1' ,   // 1. 全部 2.指定分类  3. 指定某几个
          valid_type: '',   // 1.固定天数  2：固定日期
          valid_day: '',    // 固定天数时的有效天数
          valid_start: '',  // 固定日期时开始的日期
          valid_end: '',    // 固定日期时结束的日期
          discounted_price: '',  //减多少
          full_reduction: ''  , // —》 满多少
          name: '',         // 优惠卷名称
          num: 1            // 发放数量
        }
      }
    },
    methods:{
      // 接收课程分类的数据
      courseCateOk(data) {
        console.log(data)
        this.form.commodity_id = data
      },
      submit(grant) {
        // 设置提交的类型
        this.form.grant = grant

        this.form.valid_start = this.rawDate[0]
        this.form.valid_end = this.rawDate[1]
        // 提交
        axios.post('/coupon', this.form).then(res=>{
          if(res) {
            this.$message.success('操作成功')
            this.$router.push({name: 'MarketCouponManage'})
          }
        })
      },
      // 接收子传过来的数据
      getOk(data) {
        // 把子组件传过来的放到框中
        this.form.name = data
      }
    }
}
</script>
<style scoped>

</style>
